<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品分类删除</title>
    <link
      rel="stylesheet"
      href="../utils/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"
    />
    <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"> -->
    <link rel="stylesheet" href="../css/ProductList.css" />
    <script src="../JS/jquery-3.4.1.min.js"></script>
    <script src="../utils/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
    <!-- <script src="../JS/bootstrap-table.js"></script> -->
    <!-- <script src="../JS/bootstrap-table-zh-CN.js"></script> -->
  </head>

  <body>
    <!-- 顶部 -->
    <nav
      class="navbar navbar-default navbar-static-top head"
      style="margin-bottom: -20px"
    >
      <div class="navbar-header col-lg-2 Shopping_title">
        <a href="#" class="navbar-brand">商城后台</a>
      </div>
      <div class="Menu">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
      </div>
      <div class="pull-right Out">
        <span class="glyphicon glyphicon-log-in"></span>
      </div>
    </nav>
    <!-- 左侧导航栏 -->
    <div class="navbar-default" id="nav_sub" style="margin-top: 19px">
      <ul class="nav">
        <li><img src="../images/logo.gif" alt="" class="img-responsive" /></li>
        <!-- 商品管理 -->
        <li class="First_li">
          <a href="#sub_1" data-toggle="collapse" id="btn1"
            >商品管理<span
              class="glyphicon glyphicon-chevron-right pull-right right_arrows"
            ></span
          ></a>
          <ul id="sub_1" class="collapse Second_li nav">
            <li><a href="#">商品分类管理</a></li>
            <li><a href="#">商品管理</a></li>
            <li><a href="#">Option管理</a></li>
          </ul>
        </li>
        <!-- 订单管理 -->
        <li class="First_li">
          <a href="#sub_2" data-toggle="collapse"
            >订单管理<span
              class="glyphicon glyphicon-chevron-right pull-right right_arrows"
            ></span
          ></a>
          <ul id="sub_2" class="collapse Second_li nav">
            <li><a href="#">查看订单</a></li>
          </ul>
        </li>
        <!-- 用户管理 -->
        <li class="First_li"><a href="#">用户管理</a></li>
        <!-- 评论管理 -->
        <li class="First_li"><a href="#">评论管理</a></li>
        <!-- 文章管理 -->
        <li class="First_li">
          <a href="#sub_3" data-toggle="collapse"
            >文章管理<span
              class="glyphicon glyphicon-chevron-right pull-right right_arrows"
            ></span
          ></a>
          <ul id="sub_3" class="collapse Second_li nav">
            <li><a href="文章管理.html">分类管理</a></li>
            <li><a href="文章管理2.html">文章管理</a></li>
          </ul>
        </li>
        <!-- 幻灯片管理 -->
        <li class="First_li"><a href="#">幻灯片管理</a></li>
        <!-- 销量图表 -->
        <li class="First_li"><a href="#">销量图表</a></li>
      </ul>
    </div>
    <!-- 右侧内容 -->
    <div class="container-fluid">
      <div class="row">
        <!-- 表单1 -->
        <div id="content_1" class="col-lg-10" style="margin-top: 20px">
          <!-- 第一行 -->
          <div>
            <label class="col-lg-6">商品名</label>
            <label class="col-lg-6">商品分类</label>
          </div>
          <!-- 第二行 -->
          <div style="padding-top: 15px">
            <span class="col-lg-6"
              ><input
                type="text"
                class="form-control"
                id="title"
                placeholder="商品名"
            /></span>
            <span class="col-lg-6"
              ><select name="" class="form-control" id="classify">
                <option value="全部">全部</option>
                <option value="水果类">水果类</option>
                <option value="蔬菜蛋类">蔬菜蛋类</option>
                <option value="肉禽类">肉禽类</option>
                <option value="男装">男装</option>
                <option value="女装">女装</option>
                <option value="童装">童装</option>
                <option value="运动鞋类">运动鞋类</option>
                <option value="休闲类">休闲类</option>
                <option value="家居">家居</option>
                <option value="鞋帽类">鞋帽类</option>
                <option value="电子类">电子类</option>
                <option value="软件类">软件类</option>
                <option value="家电类">家电类</option>
                <option value="鞋子">鞋子</option>
              </select></span
            >
          </div>
          <!-- 第三行 -->
          <div style="padding-top: 60px">
            <label class="col-lg-6">热门商品</label>
            <label class="col-lg-6">状态</label>
          </div>
          <!-- 第四行 -->
          <div class="form-group">
            <!-- 热门商品 -->
            <span class="col-lg-6"
              ><input
                type="radio"
                name="shopping"
                value="非热门商品"
              />非热门商品
              <input type="radio" name="shopping" value="热门商品" />热门商品
              <input
                type="radio"
                name="shopping"
                value="全部"
                checked
              />全部</span
            >
            <!-- 状态 -->
            <span class="col-lg-6"
              ><select name="" class="form-control" id="state">
                <option value="全部">全部</option>
                <option value="已上架">已上架</option>
                <option value="已下架">已下架</option>
              </select></span
            >
          </div>
          <!-- 第五行 -->
          <div class="">
            <label for="" class="col-lg-12">更新日期</label>
          </div>
          <!-- 第六行 -->
          <div>
            <span class="col-lg-6"
              ><input
                type="datetime-local"
                class="form-control"
                id="update_time"
            /></span>
            <span class="col-lg-6"
              ><input type="datetime-local" class="form-control"
            /></span>
          </div>
          <!-- 第七行 -->
          <div class="pull-right" style="margin-right: 30px; margin-top: 15px">
            <button class="btn btn-success" id="add">添加</button>
            <button class="btn btn-success" id="inquire">查询</button>
            <button class="btn btn-success" id="reset">重置</button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="content_2 col-lg-10">
          <p>
            显示
            <select id="pageSize">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10" selected>10</option></select
            >项结果
          </p>
          <table
            class="table table-striped table-bordered table-hover"
            id="userTable"
          ></table>
        </div>
      </div>
    </div>

    <script>
      // 获取商品名
      var shopping_name = $("#title").val();
      // 获取商品分类值
      var classify = $("#classify").val();
      // 获取是否为热门
      var Hot = $("[name ='shopping']").val();
      // 获取状态
      var state = $("#state").val();
      // 获取日期
      var Time = $("#update_time").val();
      $(function () {
        var tableColumns = [
          { field: "name", title: "商品名" }, //productRelationList--name
          { field: "price", title: "市场价格" },
          { field: "shopPrice", title: "店铺价格" },
          { field: "discount", title: "折扣" },
        ];

        var NewData = [];
        $.ajax({
          url: "/apis/Shopping/api/v1/catalog/category/product",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify({
            pageSize: parseInt($("#pageSize").val()), //每个分类下显示的商品数量
          }),
          success: function (data) {
            console.log(data.data);
            var Shop = data.data;
            var ShopInfo = data.data[1].productRelationList;

            for (var i = 0; i < ShopInfo.length; i++) {
              var dataNewObj = {
                name: "", //商品名
                shopPrice: "", //店内价格
                price: "", //市场价格
                discount: "", //折扣
              };

              dataNewObj.name = ShopInfo[i].name; //商品名
              dataNewObj.shopPrice = ShopInfo[i].shopPrice;
              dataNewObj.price = ShopInfo[i].price;
              dataNewObj.discount = ShopInfo[i].discount;
              NewData.push(dataNewObj);
            }
            console.log(NewData);
            //渲染表格
            $("#userTable").bootstrapTable("destroy"); //动态加载表格之前，先销毁表格

            $("#userTable").bootstrapTable({
              //表格初始化
              columns: tableColumns, //表头
              data: NewData, //通过ajax返回的数据
              pageSize: 5,
              pageNumber: 1,
              pageList: [5, 10, 15, 20],
              cache: false,
              striped: true,
              pagination: true,
              sidePagination: "client",
              search: false,
              showRefresh: false,
              showExport: false,
              showFooter: true,
              clickToSelect: true,
            });
          },
        });
      });

      // });

      // $("#userTable").bootstrapTable({
      //     method: 'post',
      //     url: "/apis/Shopping/api/v1/catalog/category/product",
      //     striped: true,
      //     pageNumber: 1,
      //     pagination: true,
      //     pageSize: 10,
      //     Columns: [
      //         { field: 'name', title: '商品名' },//productRelationList--name
      //         { field: 'name', title: '商品分类' },//data--name
      //         { field: 'generalExplain', title: '商品概要说明' },
      //         { field: 'shopPrice', title: '店内价格' },
      //         { field: 'price', title: '市场价格' },
      //         { field: 'discount', title: '数量' },
      //         { field: 'hot', title: '热门商品' },
      //         { field: 'productStatus', title: '状态' },
      //         { field: 'updateTime', title: '更新时间' },
      //         { field: 'updateUserId', title: '更新者' },
      //         { field: 'operation', title: '操作' }
      //     ],
      //     ResponseaHandler: function (res) {
      //         console.log(res);
      //         var Shop = data.data;
      //         var ShopInfo = data.data[1].productRelationList;
      //         var NewData = [];
      //         for (var i = 0; i < ShopInfo.length; i++) {
      //             var dataNewObj = {
      //                 'name': '',//商品名
      //                 'name': '',//分类名
      //                 'shopPrice': '',//店内价格
      //                 'price': '',//市场价格
      //                 'discount': '',//数量
      //                 'hot': '',//热门商品
      //                 'productStatus': '',//状态
      //                 'updateTime': '',//状态
      //                 'updateUserId': ''//状态
      //             };

      //             dataNewObj.name = ShopInfo[i].name;//商品名
      //             dataNewObj.shopPrice = ShopInfo[i].shopPrice;
      //             dataNewObj.price = ShopInfo[i].price;
      //             dataNewObj.discount = ShopInfo[i].discount;
      //             dataNewObj.hot = ShopInfo[i].hot;
      //             dataNewObj.productStatus = ShopInfo[i].productStatus;
      //             dataNewObj.updateTime = ShopInfo[i].updateTime;
      //             dataNewObj.updateUserId = ShopInfo[i].updateUserId;
      //             NewData.push(dataNewObj);
      //             console.log(NewData);
      //         }
      //         var data = {
      //             total: res.data.total,
      //             rows: NewData
      //         };
      //     }
      // })
      // $(function () {
      //     var tableColumns = [
      //         { field: 'name', title: '商品名' },//productRelationList--name
      //         { field: 'name', title: '商品分类' },//data--name
      //         { field: 'generalExplain', title: '商品概要说明' },
      //         { field: 'shopPrice', title: '店内价格' },
      //         { field: 'price', title: '市场价格' },
      //         { field: 'discount', title: '数量' },
      //         { field: 'hot', title: '热门商品' },
      //         { field: 'productStatus', title: '状态' },
      //         { field: 'updateTime', title: '更新时间' },
      //         { field: 'updateUserId', title: '更新者' },
      //         { field: 'operation', title: '操作' }
      //     ]
      // });
      // // AJAX请求
      // $(function () {
      //     $.ajax({
      //         url: "/apis/Shopping/api/v1/catalog/category/product",
      //         data: JSON.stringify({
      //             pageSize: parseInt($("#pageSize").val()), //每个分类下显示的商品数量
      //         }),
      //         contentType: "application/json",
      //         //请求类型
      //         type: "post",
      //         // 响应体类型设置
      //         dataType: "json",
      //         success: function (data) {
      //             console.log(data.data);
      //             var Shop = data.data;
      //             var ShopInfo = data.data[1].productRelationList;
      //             var NewData = [];
      //             for (var i = 0; i < ShopInfo.length; i++) {
      //                 var dataNewObj = {
      //                     'name': '',//商品名
      //                     'name': '',//分类名
      //                     'shopPrice': '',//店内价格
      //                     'price': '',//市场价格
      //                     'discount': '',//数量
      //                     'hot': '',//热门商品
      //                     'productStatus': '',//状态
      //                     'updateTime': '',//状态
      //                     'updateUserId': ''//状态
      //                 };

      //                 dataNewObj.name = ShopInfo[i].name;//商品名
      //                 dataNewObj.shopPrice = ShopInfo[i].shopPrice;
      //                 dataNewObj.price = ShopInfo[i].price;
      //                 dataNewObj.discount = ShopInfo[i].discount;
      //                 dataNewObj.hot = ShopInfo[i].hot;
      //                 dataNewObj.productStatus = ShopInfo[i].productStatus;
      //                 dataNewObj.updateTime = ShopInfo[i].updateTime;
      //                 dataNewObj.updateUserId = ShopInfo[i].updateUserId;
      //                 NewData.push(dataNewObj);
      //             console.log(dataNewObj);
      //             }

      //             console.log( NewData);
      //             // for (i = 0; i < data.data.length; i++) {
      //             //     console.log(data.data[i]);
      //             //     var dataNewObj = {
      //             //         'id': '',
      //             //         "username": '',
      //             //         'password': '',
      //             //         "startTime": '',
      //             //         'endTime': '',
      //             //         'roleName': '',
      //             //         'status': ''
      //             //     };

      //             // }
      //             // console.log(dataNewObj);
      //         },
      //         timeout: 5000,
      //         error: function () {
      //             alert("Flase")
      //         },
      //         headers: {
      //             c: 300,
      //             d: 400,
      //         }
      //     })
      // })
    </script>
  </body>
</html>
